<template>
  <div class="login">
    <i class="iconfont icon-fanhui fanhui" @click="back"></i>
    <img src="../static/img/logo.png" alt="" class="logo">
    <form class="form">
      <input type="text" name="username" class="input" placeholder="用户名密码" @on-change="onBlurUser">
      <input type="password" name="password" class="input" placeholder="密码" @on-change="onBlurPs">
      <div class="group">
        <p>
          <span>忘记密码</span>
        </p>
        <p>
          <span @click="toRegister">快速注册</span>
        </p>
      </div>
      <input type="buttom" class="submit" value="登陆" @click.native="userLogin">
    </form>
  </div>
</template>

<script>

  import {login} from "@/api/user"

  export default {
    components: {
    
    },
    data() {
      return {
        iconType1: "",
        iconType2: "",
        nameTitle: "用户名",
        psTitle: "密码",
        username: "",
        ps: ""
      }

    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      toRegister() {
        this.$router.push({path: '/user/register'})
      },
      onBlurUser(val) {
        let username = val.trim()
        username.replace("'", "")
        this.username = username
        if (username == "") {
          this.iconType1 = "error"
          this.nameTitle = "用户名不能为空！"

        } else {
          this.iconType1 = "success"
          this.nameTitle = "用户名"
        }

      },
      onBlurPs(val) {
        let ps = val.trim()
        ps.replace("'", "")
        this.ps = ps
        if (ps.length < 6) {
          this.psTitle = "密码长度大于5！"
          this.iconType2 = "error"
        } else {
          this.iconType2 = "success"
          this.psTitle = "密码"
        }

      },
      userLogin() {
        let username = this.username
        let ps = this.ps

        if (ps.length < 6 || username == "") {
          return
        }

        let loginForm = {username, ps}
        this.$store.dispatch('Login', loginForm).then((res) => {
          if (res.message == "ok") {
            this.$router.push({path: '/'})
          } else {
            this.$message.error('用户名或密码不正确!');
          }

        }).catch(() => {
        })

      }
    }
  }

</script>

<style scoped>
  .login {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
  }

  .login .fanhui {
    font-size: 20px;
    color: #06cd56;
    font-weight: bold;
    margin: 15px 0 0 15px;
  }

  .login .logo {
    display: block;
    margin: 25px auto;
    width: 80px;
  }

  .login .form {
  }

  .login .form .input {
    display: block;
    width: 80%;
    height: 35px;
    outline: 0 none;
    border: 0 none;
    margin: 15px auto;
    box-shadow: 0 0 3px #ddd;
    background: none
  }

  .login .form .input:focus {
    box-shadow: 0 0 3px #06cd56;
  }

  .login .form .group {
    width: 80%;
    display: flex;
    margin: 15px auto;
    font-size: 13px;
    color: #ccc
  }

  .login .form .group p {
    flex: 1;
  }

  .login .form .group p:last-child {
    text-align: right;
  }

  .login .form .group p span {
    text-decoration: underline;
  }

  .login .form .submit {
    display: block;
    width: 80%;
    height: 45px;
    background: #06cd56;
    border: 0 none;
    outline: 0 none;
    color: #fff;
    margin: 15px auto;
    text-align: center;
  }
</style>
